<template>
    <div style="height:650px">
      <el-input @input="map"  v-model="keyword"></el-input>
      <div id="l-map" style="width:100%;height:200px; margin-top:10px"></div>
	    <div id="r-result" style="width:100%;height:400px;overflow-y:auto;">
      </div>
    </div>
</template>

<script>
export default {
  name: 'baidumap',
 props: {
    mapInfo: {
      type: Object,
      required: true
    },
  },
  data () {
    return {
      keyword: '',
    }
  },

  created() {
    this.keyword = this.mapInfo.xxdz
  },
  mounted(){
      this.map()
  },
  methods:{
    map(item){
      var _this = this
      var map = new BMap.Map("l-map");            // 创建Map实例
      map.centerAndZoom('广西', 11);
      map.enableScrollWheelZoom(true);
      var local = new BMap.LocalSearch(map, {
      renderOptions: {map: map, panel: "r-result"}
      });
      local.search(_this.keyword);
      map.addEventListener('click', function(e){
        console.log(e,1111)
        _this.lngLat(e)
      })
    },
     lngLat(e){
      // let longitude = e.point.lng    //经度:
      // let latitude = e.point.lat    //纬度

      // console.log(e, 'eeeeee')
      // console.log(e.point.lng,'经度');
      // console.log(e.point.lat);

      let GC = new BMap.Geocoder() // 解析器 解析经纬度返回地址信息
      GC.getLocation(e.point, (res) => {
        this.keyword = res.address
        this.$emit('choose', res)
      })
    }
  }
}
</script>
<style scoped>
/* #search{
  height: 500px;
  border: 1px solid red;
} */

</style>
